import React, { createContext, useContext } from "react";
import { Button, Divider } from "antd";
import FunObj from "../../Hooks/Counter";

const CountContext = createContext(0);
const CouterSon: React.FC = (): React.ReactElement => {
  let count = useContext(CountContext);
  return <div>{count}</div>;
};
const UseCounter: React.FC = (): React.ReactElement => {
  const { count, add, inr, rec } = FunObj.useCount();
  const okto = () => {
    console.log(1);
  };
  return (
    <div>
      <h1>
        useContext Hook的出现是用于解决class类组件props传值的问题{" "}
        <Button onClick={okto}>了解</Button>
      </h1>
      <Divider orientation="left">fine</Divider>
      <h1>
        useReducer
        Hook是在解决redux状态管理的问题，不过神策的项目中状态管理基本由dva去处理{" "}
        <Button onClick={okto}>了解</Button>
      </h1>
      <Divider orientation="left">start</Divider>
      <CountContext.Provider value={count}>
        <CouterSon></CouterSon>
      </CountContext.Provider>
      <Button onClick={add}>增加</Button>
      <Button onClick={inr}>减少</Button>
      <Button onClick={rec}>重置</Button>
    </div>
  );
};
export default UseCounter;
